<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item disabled v-model="value1" :options="option1" title="综合" />
      <van-dropdown-item @change="changePrice" v-model="value1" :options="option1" title="价格" />
      <van-dropdown-item @change="chanCategory" v-model="categoryVal" :options="filterCategory" title="分类" />
    </van-dropdown-menu>
    <van-empty v-if="SearchBodyList.length==0" image="search" description="老鼠生病了吃了老鼠药会好起来吗" />
    <Products v-else :SearchBodyList="SearchBodyList"/>
  </div>
 
</template>
 
<script> 
import Products from "./Products"
export default {
  data() {
    return {
      value1: 0,
      categoryVal: "",
      option1: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      // option2: [
      //   { text: "全部", value: "a" },
      //   { text: "居家", value: "b" },
      // ]
    };
  },
  //首先页面更新之前拿到数据，如果页面更新之后，遍历数组，拿到数组中checked为true的值，然后选中这个true的值的value
  beforeUpdate(){
    this.filterCategory.map(item => {
      if(item.checked){
        this.categoryVal = item.value
      }
    })
  },
  components:{
      Products
  },
  props : ["SearchBodyList","filterCategory"],
  methods : {
    chanCategory(val){
      // console.log(val);
      this.$emit("chanCategory",val)
    },
    changePrice(val){
      // console.log(val);
      this.$emit("changePrice",val)
    }
  }
};
</script>
 
<style lang = "less" scoped>
    /* div{
      background-color: #efefef;
    } */
</style>